<template>
  <el-dialog v-if="dialogVisiable" v-model="dialogVisiable" title="脚本及参数设置" width="1000px">
    <el-button type="primary" @click="handleSelect">选择脚本及参数</el-button>
    <el-button type="primary" @click="handleBatchRun">运行</el-button>
    <el-table v-loading="loading" :data="tableDatas" class="pt-2" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column label="脚本名称" prop="name"></el-table-column>
      <el-table-column label="所属载荷文件名" prop="folder"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="scope">
          {{ statusObj[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleDetail(scope.row)">详情</el-button>
          <el-button link type="primary" size="small" :disabled="scope.row.status !== 'INIT'" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            link
            type="primary"
            size="small"
            :disabled="scope.row.status === 'PENDING' || scope.row.status === 'DOING'"
            @click="handleRun(scope.row)"
            >开始运行</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            :disabled="scope.row.status === 'PENDING' || scope.row.status === 'DOING'"
            @click="handleRemove(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </template>
    <SelectScriptParameterDialog ref="selectScriptParameterDialogRef" @on-refresh="initData" />
    <ScriptDetailDialog ref="scriptDetailDialogRef" />
  </el-dialog>
</template>

<script setup name="scriptParameterSettingDialog" lang="ts">
import { listLatestRunChain, runTaskChains, deleteRunChainRuns } from '@/api/loadProcessingAlgorithm/experimentResultStatistic/index';
import SelectScriptParameterDialog from './selectScriptParameterDialog.vue';
import ScriptDetailDialog from './scriptDetailDialog.vue';
const dialogVisiable = ref(false);
const queryFormRef = ref<ElFormInstance>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const stepActive = ref(1);
const selectScriptParameterDialogRef = ref();
const scriptDetailDialogRef = ref();
const tableDatas = ref([]);
const selectionDatas = ref([]);
const workspaceId = ref();
const loading = ref(false);
const statusObj = reactive({
  INIT: '初始化',
  PENDING: '待调度',
  DOING: '执行中',
  DONE: '完成',
  FAIL: '失败'
});
const closeDialog = () => {
  dialogVisiable.value = false;
};
const handleSelect = () => {
  selectScriptParameterDialogRef.value.openDialog(workspaceId.value);
};
const initData = () => {
  loading.value = true;
  const obj = {
    workspaceId: workspaceId.value
  };
  listLatestRunChain(obj)
    .then((res) => {
      tableDatas.value = res.data;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};
const openDialog = async (id) => {
  workspaceId.value = id;
  initData();
  dialogVisiable.value = true;
};
const handleDetail = (data) => {
  scriptDetailDialogRef.value.openDialog('view', data.id);
};
const handleEdit = (data) => {
  scriptDetailDialogRef.value.openDialog('edit', data.id);
};
const handleRun = (data) => {
  const obj = {
    chainRunInfoIds: [data.id]
  };
  runTaskChains(obj).then((res) => {
    initData();
    proxy?.$modal.msgSuccess('运行开始！');
  });
};
const handleSelectionChange = (val) => {
  selectionDatas.value = val;
};
const handleBatchRun = () => {
  if (!selectionDatas.value.length) {
    proxy?.$modal.msgWarning('请选择数据！');
    return false;
  }
  const arr = selectionDatas.value.filter((item) => item.status !== 'PENDING' && item.status !== 'DOING').map((item) => item.id);
  const obj = {
    chainRunInfoIds: arr
  };
  runTaskChains(obj).then((res) => {
    initData();
    proxy?.$modal.msgSuccess('运行开始！');
  });
};
const handleRemove = async (data) => {
  await proxy?.$modal.confirm('是否确认删除该数据?');
  deleteRunChainRuns(data.id).then((res) => {
    initData();
    proxy?.$modal.msgSuccess('删除成功');
  });
};
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
}
</style>
